<template>
  <div class="m-teacher-certificate-info">
    <div class="m-h3-btn-box border">
      <h3>教师资格证</h3>
      <div class="u-btn-box">
        <el-button
          type="primary"
          @click="teacherCertificateSave()"
          size="small"
        >
          {{ isTeacherCertificateSave ? '保存' : '编辑' }}</el-button
        >
      </div>
    </div>
    <el-form
      :model="teacherCertificate"
      label-width="100px"
      label-position="left"
      :rules="teacherCertificateRules"
      class="form"
      ref="teacherCertificate"
    >
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="" prop="picture">
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :disabled="!isTeacherCertificateSave"
              :http-request="uploadTeacherCertificateImg"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="teacherCertificate.picture"
                :src="teacherCertificate.picture"
                class="avatar"
              />
              <span
                class="el-upload-list__item-delete"
                @click.stop="handleTeacherCertificateRemove()"
                v-if="teacherCertificate.picture"
                >x</span
              >
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-row :gutter="40">
            <el-col :span="11">
              <el-form-item label="持证人：" prop="cert_holder">
                <el-input
                  v-model="teacherCertificate.cert_holder"
                  placeholder="请输入持证人"
                  clearable
                  :disabled="!isTeacherCertificateSave"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="身份证号：" prop="id_card">
                <el-input
                  v-model="teacherCertificate.id_card"
                  placeholder="请输入身份证号"
                  clearable
                  :disabled="!isTeacherCertificateSave"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="11">
              <el-form-item label="资格种类：" prop="qualification_type">
                <nice-select
                  v-model="teacherCertificate.qualification_type"
                  placeholder="请选择资格种类"
                  clearable
                  :disabled="!isTeacherCertificateSave"
                  :options="selectEnums.qualification_type"
                ></nice-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="任教学科：" prop="teach_subject">
                <nice-select
                  v-model="teacherCertificate.teach_subject"
                  placeholder="请选择任教学科"
                  clearable
                  :disabled="!isTeacherCertificateSave"
                  :options="selectEnums.teach_subject"
                ></nice-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="11">
              <el-form-item label="证件号码：" prop="cert_number">
                <el-input
                  v-model="teacherCertificate.cert_number"
                  placeholder="请输入证件号码"
                  :disabled="!isTeacherCertificateSave"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="发证时间：" prop="issue_time">
                <el-date-picker
                  v-model="teacherCertificate.issue_time"
                  type="date"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  placeholder="请选择发证时间"
                  class="date-picker"
                  :disabled="!isTeacherCertificateSave"
                  :picker-options="pickerOptions"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { ossUpload, tableInsert, tableUpdate } from '@/api/api.js'
export default {
  props: {
    url: {
      type: String,
      default: ''
    },
    selectEnums: {
      type: Object,
      default: function () {
        return {}
      }
    },
    teacherCert: {
      type: Object,
      default: function () {
        return {}
      }
    },
    staffId: ''
  },
  data () {
    return {
      isTeacherCertificateSave: false,
      teacherCertificate: {
        cert_holder: '',
        id_card: '',
        qualification_type: '',
        teach_subject: '',
        cert_number: '',
        issue_time: '',
        picture: ''
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      teacherCertificateRules: {
        cert_holder: [
          { required: true, message: '请输入持证人', trigger: 'blur' }
        ],
        // id_card: [
        //   { required: true, message: '请输入身份证号', trigger: 'blur' },
        //    {pattern: this.$valid.ident, message: '请输入正确的身份证号', trigger: 'blur'}
        // ],
        // qualification_type: [{ required: true, message: '请选择资格种类', trigger: 'change' }],
        teach_subject: [
          { required: true, message: '请选择任教学科', trigger: 'change' }
        ]
        // cert_number: [{ required: true, message: '请输入证书号码', trigger: 'blur' }],
        // issue_time: [{ required: true, message: '请选择发证时间', trigger: 'change' }],
        // picture: [{ required: true, message: '上传教师资格证', trigger: 'blur' }]
      }
    }
  },
  watch: {
    teacherCert (val) {
      if (val) {
        this.isTeacherCertificateSave = false
        this.teacherCertificate.cert_holder = val.cert_holder || ''
        this.teacherCertificate.id_card = val.id_card || ''
        this.teacherCertificate.qualification_type =
          val.qualification_type || ''
        this.teacherCertificate.teach_subject = val.teach_subject || ''
        this.teacherCertificate.cert_number = val.cert_number || ''
        this.teacherCertificate.issue_time = val.issue_time || ''
        this.teacherCertificate.picture = val.picture || ''
        this.$nextTick(() => {
          this.$refs['teacherCertificate'].clearValidate()
        })
      }
    }
  },
  methods: {
    async uploadTeacherCertificateImg (e) {
      let formData = new FormData()
      formData.append('file', e.file)
      let res = await ossUpload(formData, 'TEACHER_CERTIFICATE')
      if (res[0]) {
        return
      }
      this.teacherCertificate.picture = res[1].data.url
    },
    teacherCertificateSave () {
      if (this.isTeacherCertificateSave) {
        this.$refs['teacherCertificate'].validate(valid => {
          if (valid) {
            this.submit()
          }
        })
      } else {
        this.isTeacherCertificateSave = true
      }
    },
    async submit () {
      let res = this.teacherCert.code
        ? await tableInsert([
          {
            table_name: 'nice_teacher_cert',
            list: [
              {
                user_id: this.staffId,
                cert_holder: this.teacherCertificate.cert_holder,
                id_card: this.teacherCertificate.id_card,
                qualification_type: this.teacherCertificate
                    .qualification_type,
                teach_subject: this.teacherCertificate.teach_subject,
                cert_number: this.teacherCertificate.cert_number,
                issue_time: this.teacherCertificate.issue_time,
                picture: this.teacherCertificate.picture
              }
            ]
          }
        ])
        : await tableUpdate([
          {
            table_name: 'nice_teacher_cert',
            update: [
              {
                cert_holder: this.teacherCertificate.cert_holder,
                id_card: this.teacherCertificate.id_card,
                qualification_type: this.teacherCertificate
                    .qualification_type,
                teach_subject: this.teacherCertificate.teach_subject,
                cert_number: this.teacherCertificate.cert_number,
                issue_time: this.teacherCertificate.issue_time,
                picture: this.teacherCertificate.picture
              }
            ],
            where: [
              {
                user_id: this.staffId
              }
            ]
          }
        ])
      if (res[0]) {
        return
      }
      let data = res[1]
      if (data && data.code === 0) {
        this.$message.success('保存成功')
        this.isTeacherCertificateSave = false
        this.$emit('refreshData')
      } else {
        this.$message.error(res[1].msg)
      }
    },
    beforeAvatarUpload (file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传的封面图片只能是 JPG 或 PNG 格式或 GIF 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传的封面图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleTeacherCertificateRemove () {
      this.teacherCertificate.picture = ''
    }
  }
}
</script>
<style lang="scss" scoped></style>
